var vm = new Vue({
    el: '#app',
    data: {
        host: HOST,
        username: sessionStorage.username || localStorage.username,
        user_id: sessionStorage.user_id || localStorage.user_id,
        token: sessionStorage.token || localStorage.token,
        count: 0,
        page_size: 2,
        page: 1,
        tags: "",
        keyword:'',
        tag:''
    },
    computed: {
        total_page: function () {  // 总页数
            return Math.ceil(this.count / this.page_size);
        },
        next: function () {  // 下一页
            if (this.page >= this.total_page) {
                return 0;
            } else {
                return this.page + 1;
            }
        },
        previous: function () {  // 上一页
            if (this.page <= 0) {
                return 0;
            } else {
                return this.page - 1;
            }
        },
        page_nums: function () {  // 页码
            // 分页页数显示计算
            // 1.如果总页数<=5
            // 2.如果当前页是前3页
            // 3.如果当前页是后3页,
            // 4.既不是前3页，也不是后3页
            var nums = [];
            if (this.total_page <= 5) {
                for (var i = 1; i <= this.total_page; i++) {
                    nums.push(i);
                }
            } else if (this.page <= 3) {
                nums = [1, 2, 3, 4, 5];
            } else if (this.total_page - this.page <= 2) {
                for (var i = this.total_page; i > this.total_page - 5; i--) {
                    nums.push(i);
                }
            } else {
                for (var i = this.page - 2; i < this.page + 3; i++) {
                    nums.push(i);
                }
            }
            return nums;
        }
    },
    mounted: function () {
        axios.get(this.host + 'tags/', {
            params: {
                page_size: this.page_size,

            },
            headers: {
                'Authorization': 'JWT ' + this.token
            },
              responseType: 'json',
        })
            .then(response => {
                this.count = response.data.count
                this.tags = response.data.results
            })

    },
    methods:{
        // 请求商品数据
        get_tags: function () {
            axios.get(this.host + 'tags/', {
                params: {
                    catalog: this.tag_id,
                    show: this.show,
                    page: this.page,
                    page_size: this.page_size,
                },
                responseType: 'json'
            })
                .then(response => {
                    this.count = response.data.count;
                    this.tags = response.data.results;
                })
        },
        // 点击页数
        on_page: function (num) {
            if (num != this.page) {
                this.page = num;
                this.get_tags();
            }
        },
        search:function () {
            axios.get(this.host + 'tags/search',{
                params:{
                    keyword:this.keyword
                }
            }).
                then(response => {
                    this.count = response.data.count;
                    this.tags = response.data.results;
            })
        },
        changefocus: function (tag) {
            if (this.username) {
                axios.put(this.host + 'tagfocus/' + tag.id + '/' + this.user_id + '/'
                    ,
                    // {
                    //     headers: {
                    //         'Authorization': 'JWT ' + this.token
                    //     },
                    // },
                    {
                        user: this.user_id,
                        tag: tag.id,
                        is_focus: !tag.is_focus
                    }
                )
                    .then(response => {
                            this.tag = response.data
                            // this.tag.is_focus= response.data.is_focus
                            location.reload()
                        }
                    )
            } else {
                location.href = 'person-loginsign.html?next=qa-allTag.html'
            }
        }
    }
})
